

import store from "../store"
import { descAction, changeCount, changeCity, changeMsg, changeWord, changeDataTxt, changeDataFlag, changeDataTextAsync, changeDataMovieAsync } from "../actions";

import {ajax} from "@/utils/request"
export class Counter extends Component{
  render(){
    const state = store.getState();
    const {city,count,msg , word,data } = this.props.value
    return (
      <div>
        <div>
          {
            data.flag && <div>
                <h2> Counter - Counter - 计数器 </h2>
                <h2>count -- {state.count } -- {count}</h2>
                <h3>city==  {state.city}  -- {city }</h3>
                <h4> msg --- {msg}</h4>
                <h3>word --- {word}</h3>
                <h1> data/txt  == {data.txt} --  {state.data.txt} </h1>
            </div>
          }
        </div>
        {
          data.movie.map((item,i)=>(
            <p key={i}> {item.title }</p>
          ))
        }
        <hr/>
        <Actions word={word} flag={data.flag}></Actions>
      </div>
    )
  }
}


class Actions extends Component{
  componentDidMount(){
     store.dispatch(changeDataMovieAsync());
  }
  changetext=()=>{
    ajax.get("http://localhost:4400/api/test")
    .then(res=>{
      console.log(res)
      store.dispatch(changeDataTxt(res.data.result))
    })
  }
  render(){
    return (
      <div>
        <h2>我马上去修改父组件 -- redux - Actions </h2>
        <button onClick={()=>store.dispatch( { type:"CountADD" } )}     >count add </button>
        <button  onClick={()=>store.dispatch(descAction   )}>count desc </button> 
        <button onClick={()=>store.dispatch(changeCount(50))}  >change count </button>
        <button onClick={()=>store.dispatch( changeCity('荆门京山的 '))  }>   修改城市  </button>
        <button onClick={()=>store.dispatch(changeMsg('wh2107-天天一个转介绍...'))   }>点击修改msg </button>
        <p>
          <input type="text" value={this.props.word} ref={el=>this.one=el} onChange={
            ()=>store.dispatch(changeWord(this.one.value) )
          }/>
        </p>
        <button onClick={ ()=>store.dispatch(changeDataTxt('每天熬夜到晚上2点钟了吗....'))  }>change data text </button>
       
        <button onClick={ ()=>store.dispatch(changeDataFlag(!this.props.flag))}>change flag  </button>
        <hr/>
        <button onClick={ this.changetext  }>change text  ajax </button>
        <button onClick={ ()=>store.dispatch(changeDataTextAsync())  }>change text  ajax  async 2 </button>
      </div>
    )
  }
}